﻿<pages:MainPage
    x:Class="TheVerge.Phone.Pages.SectionsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:con="clr-namespace:TheVerge.Phone.Controls"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:pages="clr-namespace:TheVerge.Phone.Pages"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    shell:SystemTray.IsVisible="True">

    <Grid Background="{StaticResource PhoneBackgroundBrush}" Margin="-1">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.Resources>
            <pages:BackgroundColorConverter x:Key="bkgrconv" HasItemsColor="{StaticResource PhoneAccentBrush}" NoItemsColor="{StaticResource PhoneChromeBrush}" />
            <pages:BrandLongListConverter x:Key="itemsConv" />
            <DataTemplate x:Key="dtSections">
                <Button Style="{StaticResource clearButtonStyle}" Click="Section_Click" HorizontalContentAlignment="Left" Padding="12">
                    <TextBlock Text="{Binding}" Style="{StaticResource PhoneTextTitle2Style}" />
                </Button>
            </DataTemplate>

            <DataTemplate x:Key="LongListGroupHeader">
                <Grid Margin="12,0,0,0">
                    <Grid Width="75" Height="75" HorizontalAlignment="Left">
                        <TextBlock Margin="12,0,1,7" TextWrapping="Wrap" Style="{StaticResource PhoneTextLargeStyle}" Text="{Binding Key}" VerticalAlignment="Bottom"/>
                        <Border BorderThickness="1" BorderBrush="{StaticResource PhoneAccentBrush}" />
                    </Grid>
                </Grid>
            </DataTemplate>
            <phone:JumpListItemBackgroundConverter x:Key="BackgroundConverter"/>
            <phone:JumpListItemForegroundConverter x:Key="ForegroundConverter"/>
            <Style x:Key="brandJumpListStyle" TargetType="phone:LongListSelector">
                <Setter Property="GridCellSize"  Value="113,113"/>
                <Setter Property="LayoutMode" Value="Grid" />
                <Setter Property="ItemTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Border Background="{Binding Converter={StaticResource BackgroundConverter}}" Width="113" Height="113" Margin="6" >
                                <TextBlock Text="{Binding Key}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="48" Padding="6" 
                                           Foreground="{Binding Converter={StaticResource ForegroundConverter}}" VerticalAlignment="Center"/>
                            </Border>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        <con:HeaderControl />

        <controls:Pivot x:Name="thePiv" SelectionChanged="thePiv_SelectionChanged" Grid.Row="1"
                        HeaderTemplate="{StaticResource headerTemplate}"
                        TitleTemplate="{StaticResource PivotTitleTemplate}">

            <controls:PivotItem Header="hubs" DataContext="{Binding Hubs}">
                <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
                    <StackPanel Orientation="Vertical">
                        <ProgressBar Margin="6" IsIndeterminate="{Binding IsLoading}" Visibility="{Binding IsLoading, Converter={StaticResource trueVisConv}}" />
                        <ItemsControl ItemsSource="{Binding All}" ItemTemplate="{StaticResource dtSections}" />
                    </StackPanel>
                </ScrollViewer>
            </controls:PivotItem>

            <controls:PivotItem Header="brands" DataContext="{Binding Brands}">
                <phone:LongListSelector x:Name="lstMain" ItemsSource="{Binding All, Converter={StaticResource itemsConv}}"
                                        JumpListStyle="{StaticResource brandJumpListStyle}"
                                        IsGroupingEnabled="True"
                                        LayoutMode="List"
                                        GroupHeaderTemplate="{StaticResource LongListGroupHeader}"
                                        ItemTemplate="{StaticResource dtSections}" />
            </controls:PivotItem>
           
            <controls:PivotItem Header="categories" DataContext="{Binding Categories}">
                <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
                    <StackPanel Orientation="Vertical">
                        <ProgressBar Margin="6" IsIndeterminate="{Binding IsLoading}" Visibility="{Binding IsLoading, Converter={StaticResource trueVisConv}}" />
                        <ItemsControl ItemsSource="{Binding All}" ItemTemplate="{StaticResource dtSections}" />
                    </StackPanel>
                </ScrollViewer>
            </controls:PivotItem>
        </controls:Pivot>
    </Grid>

</pages:MainPage>